<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="styleSheet" href="css/dropdown/font-awesome.min.css">
<link rel="styleSheet" href="css/dropdown/message.css">
<style>
a:hover {color:#4FA9E1} 
div.nav-icon {
	float:right;
	}
	div.nav-icon div{
	width:58px;
	float:left;
	margin:0px 15px;
	text-align:center;
	cursor:pointer;
	}
	.windowMove{
	background-color:#fff;
	box-shadow:5px 8px 5px #888888;
	}
</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="height:40px;">
		<div class="row">
			<div class="col-xs-3" style="padding-left:50px;"><a href="fore_indexPage"><img src="img/fore-index-logo.png"></a></div>
			<div class="col-xs-5" style="text-align:center;margin-top:5px;">
				<div class="input-group" style="width:400px; margin:0 auto;">
			      <input type="text" class="form-control" placeholder="输入影片信息">
			      <span class="input-group-btn">
			        <button class="btn btn-default" style="background-color:#009CFF" type="button"> <font color="white"><span class="glyphicon glyphicon-search"></span> 搜索</font></button>
			      </span>
			    </div>
			</div>
			<div class="col-xs-4">
				<div class="nav-icon">
					<div id="sawDiv"><img width="24px" height="24px"src="img/time.png"><br><font size="-1.8">看过</font></div>
					<div id="collectDiv"><img width="24px" height="24px"src="img/like.png"><br><font size="-1.8">收藏</font></div>
					<!-- 个人中心 -->
					<c:choose> 
    					 <c:when test="${!empty subject.principal}">    
							<div id="userDiv"><a href=""><img width="24px" height="24px"src="user_headimage_load?pictureId=${user.userDetail.img_url}" class="img-circle"><br><font size="-1.8">${user.userDetail.nickname}</font></a></div>
 						</c:when>      

    					 <c:otherwise>  <!--否则 -->    
							<div ><a href="loginPage" ><img width="24px" height="24px"src="img/login-icon.png"><br><font size="-1.8">登录/注册</font></a></div>
  						</c:otherwise> 
					</c:choose>
					<div ><a href="submitPage"><img width="24px" height="24px"src="img/note.png"><br><font size="-1.8">投稿</font></a></div>
				</div>
			</div>
		</div>
	</nav>
<!-- 用户个人个人中心下拉框 -->
<div id="showUserDiv"class="message-frame animated fadeIn" style="width: 90px; position: fixed; left: 30px; top: 37.5px;display:none">
	<!-- <div class="message-frame-header">
		<span style="height: 40px;line-height: 40px;text-align: center;width: 50px;    display: inline-block;">我的</span>
		<button class="message-btn message-btn-blue message-btn-header" data-type="1"></button>
	</div> -->
	<div class="message-content" style="max-height:350px">
		<ul class="message-content-list">
			<li class="load" load="userCenterPage"><div class="message-content-list-item-content"><p><span class="glyphicon glyphicon-user"></span>个人中心</p></div></li>
			<li style="cursor:not-allowed; "><div class="message-content-list-item-content "><p><span class="glyphicon glyphicon-pencil"></span>投稿管理</p></div></li>
			<li style="cursor:not-allowed; "><div class="message-content-list-item-content "><p><span class="glyphicon glyphicon-tint"></span>积分管理</p></div></li>
			<li style="cursor:not-allowed; "><div class="message-content-list-item-content "><p><span class="glyphicon glyphicon-gift"></span>会员服务</p></div></li>
		</ul>
	</div>
	<a href="doLogout"><div class="message-footer" data-type="2"><span>退出登录</span></div></a>
</div>
<!-- 看过下拉框 -->
<div id="showSawDiv"class="message-frame animated fadeIn" style="width: 180px; position: fixed; left: 30px; top: 37.5px;display:none;">
	<div class="message-content" style="max-height:200px">
		<ul class="message-content-list" id="ulhistory">
			 <li><a href="loginPage"><div class="message-content-list-item-content"><p style="width:160px;">请先登录</p></div></a></li> 
		</ul>
	</div>
</div>

<!-- 收藏下拉框 -->
<div id="showCollectDiv"class="message-frame animated fadeIn" style="width: 120px; position: fixed;left: 30px; top: 37.5px;display:none;">
	<div class="message-content" style="max-height:200px">
		<ul class="message-content-list" id="ulpraise">
			 <li><a href="loginPage"><div class="message-content-list-item-content"><p>请先登录</p></div></a></li> 
		</ul>
	</div>
</div>

<script>
//我的个人信息
$("#userDiv").mouseenter(function(){
	clearDropDiv();
	var offSet = $(this).offset();
	var Tleft = offSet.left;
	$("#showUserDiv").css({"top":50,"left":Tleft+10});
	$("#showUserDiv").show(50);
});

//看过
$("#sawDiv").mouseenter(function(){
	clearDropDiv();
	var offSet = $(this).offset();
	var Tleft = offSet.left;
	$("#showSawDiv").css({"top":50,"left":Tleft+10});
	$("#showSawDiv").show(50);
});
//收藏
$("#collectDiv").mouseenter(function(){
	clearDropDiv();
	var offSet = $(this).offset();
	var Tleft = offSet.left;
	$("#showCollectDiv").css({"top":50,"left":Tleft+10});
	$("#showCollectDiv").show(50);
});

//隐藏所有下拉框
function clearDropDiv(){
	$("#showUserDiv").hide();
	$("#showSawDiv").hide();
	$("#showCollectDiv").hide();
}

$("body").click(function(){
	clearDropDiv();
});

$(".load").click(function(){
	var url = $(this).attr("load");
	 location.assign(url);
});

//加载点赞/收藏
$.ajax({
	url:"load_user_praise",
	success:function(data){
		if(data!="FAIL"){
			var tvs = data;
			var htmlStr = "";
			if(tvs.length==0){
				$("#ulpraise").html("<li><div class='message-content-list-item-content'><p>您还没有收藏过影片哦</p></div></li>");
			}else{
				for(var i=0;i<tvs.length;i++){
					htmlStr+="<li><a href='palytvPage?id="+tvs[i].id+"'><div class='message-content-list-item-content'><p>"+tvs[i].name+"</p></div></a></li>"
				}
				$("#ulpraise").html(htmlStr);
			}
		}
	}
});

//加载看过
$.ajax({
	url:"load_user_history",
	success:function(data){
		if(data!="FAIL"){
			var historys = data;
			var htmlStr = "";
			if(historys.length==0){
				$("#ulhistory").html("<li><div class='message-content-list-item-content'><p>您还没有看过影片哦</p></div></li>");
			}else{
				for(var i=0;i<historys.length;i++){
					htmlStr+="<li><a href='palytvPage?id="+historys[i].tv.id+"'><div class='message-content-list-item-content'><p style='width:150px;'>"+historys[i].tv.name+"<font class='pull-right'>"+getDateDetail(historys[i].createDate)+"</font></p></div></a></li>"
				}
				$("#ulhistory").html(htmlStr);
			}
		}
	}
});

$(function(){   
    var winHeight = $(document).scrollTop();
 
    $(window).scroll(function() {
        var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
 
        if (scrollY > 0){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
            $('.navbar').addClass('windowMove');
        } 
        else {
            $('.navbar').removeClass('windowMove');
        }
     });
});
</script>